<template>
  <div style="height: 568px">
    <div class="flex-row-start-start">
      <div style="width: 90%" class="flex-row-start-center">
        <Select
          v-model="eventType"
          style="width: calc(12.34% - 10px); margin-right: 10px"
          placeholder="事故类型"
          size="large"
          clearable
        >
          <Option v-for="item in eventTypeList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <DatePicker
          type="datetime"
          v-model="findTime"
          placeholder="发现时间"
          format="yyyy年MM月dd日"
          style="width: calc(12.34% - 10px); margin-left: 10px"
          size="large"
          @onChange="changeTime"
          clearable
        ></DatePicker>
        <Select
          v-model="kqName"
          style="width: calc(12.34% - 10px); margin-left: 10px"
          placeholder="库区名称"
          size="large"
          clearable
        >
          <Option v-for="item in kqNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <!-- <Select
          v-model="jzId"
          style="width: calc(12.34% - 10px); margin-left: 10px"
          placeholder="井组编号"
          size="large"
          clearable
        >
          <Option v-for="item in jzIdList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
        <Select
          v-model="jzName"
          style="width: calc(12.34% - 10px); margin-left: 10px"
          placeholder="井组名称"
          size="large"
          clearable
        >
          <Option v-for="item in jzNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <Select
          v-model="dealSection"
          style="width: calc(13.8% - 10px); margin-left: 10px"
          placeholder="处理状态"
          size="large"
          clearable
        >
          <Option v-for="item in dealSectionList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div style="width: 10%" class="flex-row-end-center">
        <Button
          type="error"
          style="width: 60px; text-align: center"
          @click="onQuery"
          >查询</Button
        >
      </div>
    </div>
    <div style="margin-top: 20px">
      <Table :columns="columns" :data="tableData"></Table>
      <div
        class="flex-row-end-center"
        style="margin-top: 10px"
        v-if="totalLen > 10"
      >
        <Page
          :total="totalLen"
          :page-size="pageSize"
          show-total
          @on-change="changepage"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      eventTypeList: ["泄漏", "连通性", "环库泄漏"],
      eventType: "",
      findTime: "",
      kqName: "",
      kqNameList: ["金坛","刘庄"],
      jzId: "",
      jzIdList: [],
      jzName: "",
      jzNameList: [],
      dealSection: "",
      dealSectionList: ["未处理", "正在修理", "已处理"],
      columns: [
        { title: "事故类型", key: "event_type" },
        { title: "发现时间", key: "findTime" },
        { title: "库区名称", key: "kqName" },
        { title: "井组编号", key: "jzId" },
        { title: "井组名称", key: "jzName" },
        { title: "处理情况", key: "dealSection" },
        { title: "事故定位", key: "eventPos" },
        {title:'示踪剂数值',key:'jcValue'},
        { title: "数据最后更新时间", key: "updateTime" },
      ],
      tableData: [],
      jcEventList: [],
      pageSize: 10,
      curPage: 0,
    };
  },
  props: {
    jcEventInfoList: Array,
    totalLen: Number,
  },
  created(){
    console.log("组件初始化")
    this.getJzNameList()
    // console.log(<Table/>)
  },
  watch: {
    jcEventInfoList(val) {
      this.jcEventList = val;
      this.tableData = this.jcEventList.slice(0, this.pageSize);
      let it = this;
      // it.kqNameList = [];
      it.jzIdList = [];
      // it.jzNameList = [];
      console.log(this.jcEventList);
      // this.jcEventList.forEach((item) => {
      //   if (it.kqNameList.indexOf(item.kqName) < 0) {
      //     it.kqNameList.push(item.kqName);
      //   }
      //   if (it.jzIdList.indexOf(item.jzId) < 0) {
      //     it.jzIdList.push(item.jzId);
      //   }
      //   if (it.jzNameList.indexOf(item.jzName) < 0) {
      //     it.jzNameList.push(item.jzName);
      //   }
      // });
    },
  },
  methods: {
    getJzNameList(){
      let param={kqName:this.kqName};
      this.$axios
        .post("/getJzNameList", param, {
          headers: { "Content-Type": "application/json;charset=UTF-8" },
        })
        .then((response) => {
            console.log(response.data)
            if(response.data!=null)
            {
              this.jzNameList=response.data;
            }
        })
        .catch((error) => {});
    },
    changeTime(val) {
      this.findTime = val;
    },
    changepage(index) {
      this.curPage = index;
      let it = this;
      let o = {};
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.dealSection == "" || it.dealSection == undefined) {
        it.dealSection = "";
      }
      if (it.eventType == "" || it.eventType == undefined) {
        it.eventType = "";
      }
      if (it.findTime == "" || it.findTime == undefined) {
        it.findTime = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      o.kqName = it.kqName;
      o.dealSection = it.dealSection;
      o.eventType = it.eventType;
      o.findTime = it.findTime;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.page = index - 1;
      this.$emit("change-to-page", o);
    },
    onQuery() {
      let it = this;
      let o = {};
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.dealSection == "" || it.dealSection == undefined) {
        it.dealSection = "";
      }
      if (it.eventType == "" || it.eventType == undefined) {
        it.eventType = "";
      }
      if (it.findTime == "" || it.findTime == undefined) {
        it.findTime = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      o.kqName = it.kqName;
      o.dealSection = it.dealSection;
      o.eventType = it.eventType;
      o.findTime = it.findTime;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.page = 0;
      
      this.$emit("change-to-page", o);
    },
    query() {
      let data = [];
      let it = this;
      if (
        !(
          (it.kqName == "" || it.kqName == undefined) &&
          (it.dealSection == "" || it.dealSection == undefined) &&
          (it.eventType == "" || it.eventType == undefined) &&
          (it.findTime == "" || it.findTime == undefined) &&
          (it.jzId == "" || it.jzId == undefined) &&
          (it.jzName == "" || it.jzName == undefined)
        )
      ) {
        data = this.jcEventList.filter(function (item) {
          return (
            (it.kqName != "" || it.kqName == undefined
              ? item.kqName == it.kqName
              : true) &&
            (it.dealSection != "" || it.dealSection == undefined
              ? item.dealSection == it.dealSection
              : true) &&
            (it.eventType != "" || it.eventType == undefined
              ? item.event_type == it.eventType
              : true) &&
            (it.findTime != "" || it.findTime == undefined
              ? item.findTime == it.findTime
              : true) &&
            (it.jzid != "" || it.jzId == undefined
              ? item.jzId == it.jzId
              : true) &&
            (it.jzName != "" || it.jzName == undefined
              ? item.jzName == it.jzName
              : true)
          );
        });
        console.log(data);
        this.tableData = data.slice(0, this.pageSize);
      } else {
        this.tableData = this.jcEventList.slice(0, this.pageSize);
      }
      console.log(this.tableData);
    },
  },
};
</script>
<style scoped>
</style>